<template>
	<view class="shopDetails">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false" @init="initNavigation" title="收益详情" backgroundColor="#fff" color="#000">
		 <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
		   <tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
		 </view>
		</tui-navigation-bar>
		<view class="tabList" :style="{ marginTop: marginTp + 'px' }">
			<view class="tabList_tab">
				<tutor-tab :list="['收益详情','关联订单']" @clickSwtichTab="clickSwtichTab" :atciveIndex="atciveIndex"></tutor-tab>
			</view>
			<view class="detils" v-if="!atciveIndex">
				 <view class="income">
					 <view class="income_t"><text>总金额</text></view>
					 <view class="income_b"><text>￥{{amount}}</text></view>
				 </view>
				 <view class="percent" v-for="(item,key) in details" :key="key">
						 <view class="percent_l">
							 <text v-if="item.type==1">平台分单：{{item.ratio}}</text>
							 <text v-else-if="item.type==2">商家分单：{{item.ratio}}</text>
							 <text v-else-if="item.type==3">教练分单：{{item.ratio}}</text>
							 <text v-else-if="item.type==4">分享用户分单：{{item.ratio}}</text>
						 </view>
						 <view class="percent_r"><text>￥{{item.amount}}</text></view>
				 </view>
			</view>
			<view class="order" v-else>
				 <view class="orderInfo">
					 <view class="orderInfoTitle">
						 <view class="lt"></view>
						 <view class="rt"><text>订单信息</text></view>
					 </view>
					 <view class="orderInfoContent">
						 <view class="item">
							 <view class="iteml"><text>订单号</text></view>
							<view class="itemr icon">
									 <view><text>{{orderDetails.ordersVo.id}}</text></view>
									 <image  class="iconimg" src="/static/tutor/order/icon_copy@2x.png"></image>
							</view>
						 </view>
						 <view class="item">
							 <view class="iteml"><text>支付金额</text></view>
							 <view class="itemr"><text>￥{{orderDetails.ordersVo.actualAmount}}</text></view>
						 </view>
						 <view class="item">
							 <view class="iteml"><text>支付方式</text></view>
							 <view class="itemr"><text>{{orderDetails.ordersVo.payPlatform}}</text></view>
						 </view>
						 <view class="item">
							 <view class="iteml"><text>预约时间</text></view>
							 <view class="itemr"><text>{{orderDetails.invite.reserve_date}} {{orderDetails.invite.reserveBeginTime}}—{{orderDetails.invite.reserve_date}} {{orderDetails.invite.reserveEndTime}}</text></view>
						 </view>
						 <view class="item">
							 <view class="iteml"><text>预约时长</text></view>
							 <view class="itemr"><text>{{orderDetails.invite.hourNumber}}小时</text></view>
						 </view>
						 <view class="item">
							 <view class="iteml"><text>服务地址</text></view>
							 <view class="itemr icon">
								 <view><text>{{orderDetails.invite.inviteMerchant.address}}</text></view>
								 <image class="iconimg" src="/static/tutor/order/icon_edit@2x.png"></image>
							 </view>
						 </view>
					 </view>
				 </view>
				 <view class="clientInfo">
						<view class="clientInfoTitle">
							<view class="lt"></view>
							<view class="rt"><text>客户信息</text></view>
						</view>
						<view class="clientInfoContent">
							<view class="item">
								 <view class="iteml"><text>联系人</text></view>
								 <view class="itemr"><text>{{orderDetails.invite.appellation}}</text></view>
							</view>
							<view class="item">
								 <view class="iteml"><text>联系电话</text></view>
								 <view class="itemr"><text>{{orderDetails.invite.subscribePhone}}</text></view>
							</view>
							<view class="item">
								 <view class="iteml"><text>邀约类型</text></view>
								 <view class="itemr"><text>{{orderDetails.invite.reserveType}}</text></view>
							</view>
							<view class="item">
								 <view class="iteml"><text>备注</text></view>
								 <view class="itemr"><text>{{orderDetails.invite.remark}}</text></view>
							</view>
						</view>
				 </view>
				 <view class="tutorInfo">
							<view class="clientInfoTitle">
								<view class="lt"></view>
								<view class="rt"><text>教练信息</text></view>
							</view>
							<view class="clientInfoContent">
								<view class="item">
									 <view class="iteml"><text>教练昵称</text></view>
									 <view class="itemr"><text>{{orderDetails.assistant.assistantName}}</text></view>
								</view>
								<view class="item">
									 <view class="iteml"><text>联系电话</text></view>
									 <view class="itemr"><text>{{orderDetails.assistant.phoneNumber}}</text></view>
								</view>
								<view class="item">
									 <view class="iteml"><text>专属球厅</text></view>
									 <view class="itemr"><text>>{{orderDetails.invite.inviteMerchant.merchantName}}</text></view>
								</view> 
							</view>
				 </view>
			</view>
				  
		</view>
	</view>
</template>

<script>
	import {getOrderBillInfo} from '@/http/api/distribution/distribution.js'
	import {getOrderDetails} from '@/http/api/order/order.js'
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp:0,
				atciveIndex:0,//切换商家图片和教练列表
				orderId:"",
				amount:'',
				orderDetails:{},
				id:"",
				details:[]
			}
		},
		onLoad(options) {
			if(options){ 
				this.orderId=options.orderId
				this.id=options.id
				 getOrderBillInfo(options.id).then(res=>{
					 if(res.code==200){
						this.details=res.data
					 }
				 })
			}
		},
		methods: { 
			initNavigation(e) { 
			 		this.top = e.top;
					this.marginTp =   e.height
			 	},
			back() {
			 		uni.navigateBack();
			 	},
			clickSwtichTab(data){
				this.atciveIndex= data.index
				if(data.index==0){
					getOrderBillInfo(this.id).then(res=>{
						 if(res.code==200){
							this.details=res.data
						 }
					})
				}else{
					getOrderDetails(this.orderId).then(res=>{
						if(res.code==200){
							this.orderDetails=res.data
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './earningsDetils.scss';
</style>